<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { addAdvertAPI, editAdvertAPI } from "@/api/resource.ts";

const id = ref('')
const type = ref()
// const uploadRef = ref()
const dialogVisible = ref(false)
const uploadUrl = import.meta.env.VITE_UPLOAD_ADVERT_IMG
const ruleForm = reactive({
  name: '',
  img: '',
  url: '',
  position: '',
  status: true
})
const emit = defineEmits(['get'])

// 初始
const init = (row: any, number: number) => {
  dialogVisible.value = true
  type.value = number
  ruleForm.name = ''
  ruleForm.img = ''
  ruleForm.url = ''
  ruleForm.position = ''
  ruleForm.status = true
  // uploadRef.value.clearFiles()
  if (number) {
    id.value = row._id
    ruleForm.name = row.name
    ruleForm.img = row.img
    ruleForm.url = row.url
    ruleForm.position = row.position
    ruleForm.status = !!row.status
  }
}

// 取消
const handleCancel = () => {
  dialogVisible.value = false
}

// 添加广告
const handleAdd = async () => {
  const res: any = await addAdvertAPI(ruleForm)
  if (res.code === 0) {
    ElMessage({
      type: "success",
      message: res.message
    })
  }
  emit('get')
  handleCancel()
}

// 编辑部位
const handleEdit = async () => {
  const res: any = await editAdvertAPI(id.value, ruleForm)
  ElMessage({
    type: res.code === 0 ? "success" : "error",
    message: res.message
  })
  emit('get')
  handleCancel()
}

// 上传部位图片成功回调
const onSuccessUpload = async (response: any) => {
  ruleForm.img = response.data
}

defineExpose({
  init
})
</script>

<template>
  <el-dialog v-model="dialogVisible" :title="type === 0 ? '添加广告' : '编辑广告'">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      style="padding: 0 50px"
      class="demo-ruleForm"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name" type="text" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="链接" prop="url">
        <el-input v-model="ruleForm.url" type="text" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="位置" prop="position">
        <el-select v-model="ruleForm.position">
          <el-option label="社区" value="community">社区</el-option>
          <el-option label="'课程" value="course">课程</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="url">
        <el-switch v-model="ruleForm.status"/>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-upload
          v-model="ruleForm.img"
          class="upload-demo"
          drag
          ref="uploadRef"
          :on-success="onSuccessUpload"
          :action="uploadUrl"
        >
          <el-icon class="el-icon--upload">
            <upload-filled/>
          </el-icon>
          <div class="el-upload__text">
            点击这里 <em>上传</em>
          </div>
        </el-upload>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button v-if="type === 0" type="primary" @click="handleAdd">
          确定
        </el-button>
        <el-button v-else type="primary" @click="handleEdit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.upload-demo {
  width: 100%;
}
</style>
